<template>
  <view class="area-selector-container">
    <button 
      :class="[className]" 
      @click="showSelector"
      :disabled="disabled"
    >
      {{ displayText || placeholder }}
    </button>
    
    <!-- 自定义弹窗选择器 -->
    <view v-if="showPicker" class="picker-modal" @click="hideSelector">
      <view class="picker-content" @click.stop>
        <view class="picker-header">
          <text class="cancel-btn" @click="hideSelector">取消</text>
          <text class="title">{{currentLevel === 'province' ? '选择省份' : currentLevel === 'city' ? '选择城市' : '选择区县'}}</text>
          <text class="confirm-btn" @click="confirmSelection">确定</text>
        </view>
        <view class="picker-body">
          <scroll-view 
            class="option-list" 
            scroll-y 
            :scroll-into-view="scrollIntoView"
            @scroll="onScroll"
          >
            <view 
              v-for="(item, index) in currentOptions"
              :key="index"
              :id="`option-${index}`"
              :class="['option-item', { active: selectedIndex === index }]"
              @click="selectOption(index)"
            >
              {{item}}
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'NewAreaSelector',
    props: {
      // 省份值
      province: {
        type: String,
        default: ''
      },
      // 城市值
      city: {
        type: String,
        default: ''
      },
      // 区县值
      county: {
        type: String,
        default: ''
      },
      // 占位文本
      placeholder: {
        type: String,
        default: '点击选择省市区'
      },
      // 自定义样式类
      className: {
        type: String,
        default: 'area-selector'
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        // 是否显示选择器
        showPicker: false,
        // 当前选择层级: province, city, county
        currentLevel: 'province',
        // 当前层级的选项列表
        currentOptions: [],
        // 当前选中的索引
        selectedIndex: 0,
        // 滚动到的视图ID
        scrollIntoView: '',
        // 临时存储选择的值
        tempProvince: '',
        tempCity: '',
        tempDistrict: '',
        // 省市区数据 - 实际项目中应该从接口获取
        areas: {
          "北京市": {
            "北京市": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区", "石景山区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云区", "延庆区"]
          },
          "上海市": {
            "上海市": ["黄浦区", "徐汇区", "长宁区", "静安区", "普陀区", "虹口区", "杨浦区", "浦东新区", "闵行区", "宝山区", "嘉定区", "金山区", "松江区", "青浦区", "奉贤区", "崇明区"]
          },
          "广东省": {
            "广州市": ["越秀区", "海珠区", "荔湾区", "天河区", "白云区", "黄埔区", "番禺区", "花都区", "南沙区", "从化区", "增城区"],
            "深圳市": ["福田区", "罗湖区", "南山区", "宝安区", "龙岗区", "盐田区", "龙华区", "坪山区", "光明区", "大鹏新区"],
            "东莞市": ["莞城区", "东城区", "南城区", "万江区", "石龙镇", "石排镇", "茶山镇", "企石镇", "桥头镇", "东坑镇", "横沥镇", "常平镇", "虎门镇", "长安镇", "沙田镇", "厚街镇", "寮步镇", "大岭山镇", "大朗镇", "黄江镇", "樟木头镇", "凤岗镇", "塘厦镇", "谢岗镇", "清溪镇", "常平镇", "桥头镇", "麻涌镇", "中堂镇", "高埗镇", "石碣镇", "望牛墩镇", "洪梅镇", "道滘镇", "东坑镇", "企石镇", "茶山镇", "石排镇", "石龙镇", "松山湖高新区"],
            "佛山市": ["禅城区", "南海区", "顺德区", "三水区", "高明区"],
            "珠海市": ["香洲区", "斗门区", "金湾区"],
            "汕头市": ["金平区", "龙湖区", "濠江区", "潮阳区", "潮南区", "澄海区", "南澳县"],
            "江门市": ["蓬江区", "江海区", "新会区", "台山市", "开平市", "鹤山市", "恩平市"],
            "湛江市": ["赤坎区", "霞山区", "坡头区", "麻章区", "廉江市", "雷州市", "吴川市", "遂溪县", "徐闻县"],
            "茂名市": ["茂南区", "电白区", "高州市", "化州市", "信宜市"],
            "肇庆市": ["端州区", "鼎湖区", "高要区", "四会市", "广宁县", "怀集县", "封开县", "德庆县"],
            "惠州市": ["惠城区", "惠阳区", "博罗县", "惠东县", "龙门县"],
            "梅州市": ["梅江区", "梅县区", "兴宁市", "大埔县", "丰顺县", "五华县", "平远县", "蕉岭县"],
            "汕尾市": ["城区", "陆丰市", "海丰县", "陆河县"],
            "河源市": ["源城区", "紫金县", "龙川县", "连平县", "和平县", "东源县"],
            "阳江市": ["江城区", "阳东区", "阳春市", "阳西县"],
            "清远市": ["清城区", "清新区", "英德市", "连州市", "佛冈县", "阳山县", "连山壮族瑶族自治县", "连南瑶族自治县"],
            "东莞市": ["莞城区", "东城区", "南城区", "万江区", "石龙镇", "石排镇", "茶山镇", "企石镇", "桥头镇", "东坑镇", "横沥镇", "常平镇", "虎门镇", "长安镇", "沙田镇", "厚街镇", "寮步镇", "大岭山镇", "大朗镇", "黄江镇", "樟木头镇", "凤岗镇", "塘厦镇", "谢岗镇", "清溪镇", "常平镇", "桥头镇", "麻涌镇", "中堂镇", "高埗镇", "石碣镇", "望牛墩镇", "洪梅镇", "道滘镇"],
            "中山市": ["石岐区", "东区", "西区", "南区", "五桂山区", "火炬开发区", "黄圃镇", "南头镇", "东凤镇", "阜沙镇", "小榄镇", "东升镇", "古镇镇", "横栏镇", "三角镇", "民众镇", "南朗镇", "港口镇", "大涌镇", "沙溪镇", "三乡镇", "板芙镇", "神湾镇", "坦洲镇"],
            "潮州市": ["湘桥区", "潮安区", "饶平县"],
            "揭阳市": ["榕城区", "揭东区", "普宁市", "揭西县", "惠来县"],
            "云浮市": ["云城区", "云安区", "罗定市", "新兴县", "郁南县"]
          },
          "江苏省": {
            "南京市": ["玄武区", "秦淮区", "建邺区", "鼓楼区", "浦口区", "栖霞区", "雨花台区", "江宁区", "六合区", "溧水区", "高淳区"],
            "无锡市": ["锡山区", "惠山区", "滨湖区", "梁溪区", "新吴区", "江阴市", "宜兴市"],
            "徐州市": ["鼓楼区", "云龙区", "贾汪区", "泉山区", "铜山区", "新沂市", "邳州市", "丰县", "沛县", "睢宁县"],
            "常州市": ["天宁区", "钟楼区", "新北区", "武进区", "金坛区", "溧阳市"],
            "苏州市": ["姑苏区", "虎丘区", "吴中区", "相城区", "吴江区", "苏州工业园区", "常熟市", "张家港市", "昆山市", "太仓市"],
            "南通市": ["崇川区", "港闸区", "通州区", "启东市", "如皋市", "海门市", "海安市", "如东县"],
            "连云港市": ["连云区", "海州区", "赣榆区", "东海县", "灌云县", "灌南县"],
            "淮安市": ["清江浦区", "淮安区", "淮阴区", "洪泽区", "涟水县", "盱眙县", "金湖县"],
            "盐城市": ["亭湖区", "盐都区", "大丰区", "东台市", "响水县", "滨海县", "阜宁县", "射阳县", "建湖县"],
            "扬州市": ["广陵区", "邗江区", "江都区", "仪征市", "高邮市", "宝应县"],
            "镇江市": ["京口区", "润州区", "丹徒区", "丹阳市", "扬中市", "句容市"],
            "泰州市": ["海陵区", "高港区", "姜堰区", "兴化市", "靖江市", "泰兴市"],
            "宿迁市": ["宿城区", "宿豫区", "沭阳县", "泗阳县", "泗洪县"]
          },
          "浙江省": {
            "杭州市": ["上城区", "下城区", "江干区", "拱墅区", "西湖区", "滨江区", "萧山区", "余杭区", "富阳区", "临安区", "桐庐县", "淳安县", "建德市"],
            "宁波市": ["海曙区", "江北区", "北仑区", "镇海区", "鄞州区", "奉化区", "余姚市", "慈溪市", "象山县", "宁海县"],
            "温州市": ["鹿城区", "龙湾区", "瓯海区", "洞头区", "瑞安市", "乐清市", "永嘉县", "平阳县", "苍南县", "文成县", "泰顺县"],
            "嘉兴市": ["南湖区", "秀洲区", "海宁市", "平湖市", "桐乡市", "嘉善县", "海盐县"],
            "湖州市": ["吴兴区", "南浔区", "德清县", "长兴县", "安吉县"],
            "绍兴市": ["越城区", "柯桥区", "上虞区", "诸暨市", "嵊州市", "新昌县"],
            "金华市": ["婺城区", "金东区", "兰溪市", "义乌市", "东阳市", "永康市", "武义县", "浦江县", "磐安县"],
            "衢州市": ["柯城区", "衢江区", "江山市", "常山县", "开化县", "龙游县"],
            "舟山市": ["定海区", "普陀区", "岱山县", "嵊泗县"],
            "台州市": ["椒江区", "黄岩区", "路桥区", "温岭市", "临海市", "玉环市", "三门县", "天台县", "仙居县"],
            "丽水市": ["莲都区", "龙泉市", "青田县", "缙云县", "遂昌县", "松阳县", "云和县", "庆元县", "景宁畲族自治县"]
          },
          "四川省": {
            "成都市": ["锦江区", "青羊区", "金牛区", "武侯区", "成华区", "龙泉驿区", "青白江区", "新都区", "温江区", "双流区", "郫都区", "新津区", "都江堰市", "彭州市", "邛崃市", "崇州市", "简阳市", "金堂县", "大邑县", "蒲江县"],
            "自贡市": ["自流井区", "贡井区", "大安区", "沿滩区", "荣县", "富顺县"],
            "攀枝花市": ["东区", "西区", "仁和区", "米易县", "盐边县"],
            "泸州市": ["江阳区", "纳溪区", "龙马潭区", "泸县", "合江县", "叙永县", "古蔺县"],
            "德阳市": ["旌阳区", "罗江区", "广汉市", "什邡市", "绵竹市", "中江县"],
            "绵阳市": ["涪城区", "游仙区", "安州区", "江油市", "三台县", "盐亭县", "梓潼县", "北川羌族自治县", "平武县"],
            "广元市": ["利州区", "昭化区", "朝天区", "旺苍县", "青川县", "剑阁县", "苍溪县"],
            "遂宁市": ["船山区", "安居区", "射洪市", "蓬溪县", "大英县"],
            "内江市": ["市中区", "东兴区", "隆昌市", "威远县", "资中县"],
            "乐山市": ["市中区", "沙湾区", "五通桥区", "金口河区", "峨眉山市", "犍为县", "井研县", "夹江县", "沐川县", "峨边彝族自治县", "马边彝族自治县"],
            "南充市": ["顺庆区", "高坪区", "嘉陵区", "阆中市", "南部县", "营山县", "蓬安县", "仪陇县", "西充县"],
            "眉山市": ["东坡区", "彭山区", "仁寿县", "洪雅县", "丹棱县", "青神县"],
            "宜宾市": ["翠屏区", "南溪区", "叙州区", "江安县", "长宁县", "高县", "珙县", "筠连县", "兴文县", "屏山县"],
            "广安市": ["广安区", "前锋区", "华蓥市", "岳池县", "武胜县", "邻水县"],
            "达州市": ["通川区", "达川区", "万源市", "宣汉县", "开江县", "大竹县", "渠县"],
            "雅安市": ["雨城区", "名山区", "荥经县", "汉源县", "石棉县", "天全县", "芦山县", "宝兴县"],
            "巴中市": ["巴州区", "恩阳区", "通江县", "南江县", "平昌县"],
            "资阳市": ["雁江区", "安岳县", "乐至县"],
            "阿坝藏族羌族自治州": ["马尔康市", "汶川县", "理县", "茂县", "松潘县", "九寨沟县", "金川县", "小金县", "黑水县", "阿坝县", "若尔盖县", "红原县"],
            "甘孜藏族自治州": ["康定市", "泸定县", "丹巴县", "九龙县", "雅江县", "道孚县", "炉霍县", "甘孜县", "新龙县", "德格县", "白玉县", "石渠县", "色达县", "理塘县", "巴塘县", "乡城县", "稻城县", "得荣县"],
            "凉山彝族自治州": ["西昌市", "会理市", "木里藏族自治县", "盐源县", "德昌县", "会东县", "宁南县", "普格县", "布拖县", "金阳县", "昭觉县", "喜德县", "冕宁县", "越西县", "甘洛县", "美姑县", "雷波县"]
          },
          "山东省": {
            "济南市": ["历下区", "市中区", "槐荫区", "天桥区", "历城区", "长清区", "章丘区", "济阳区", "莱芜区", "钢城区", "平阴县", "商河县"],
            "青岛市": ["市南区", "市北区", "李沧区", "崂山区", "西海岸新区", "城阳区", "即墨区", "胶州市", "平度市", "莱西市"],
            "淄博市": ["淄川区", "张店区", "博山区", "临淄区", "周村区", "桓台县", "高青县", "沂源县"],
            "枣庄市": ["市中区", "薛城区", "峄城区", "台儿庄区", "山亭区", "滕州市"],
            "东营市": ["东营区", "河口区", "垦利区", "利津县", "广饶县"],
            "烟台市": ["芝罘区", "福山区", "牟平区", "莱山区", "蓬莱区", "龙口市", "莱阳市", "莱州市", "招远市", "栖霞市", "海阳市"],
            "潍坊市": ["潍城区", "寒亭区", "坊子区", "奎文区", "青州市", "诸城市", "寿光市", "安丘市", "高密市", "昌邑市", "临朐县", "昌乐县"],
            "济宁市": ["任城区", "兖州区", "曲阜市", "邹城市", "微山县", "鱼台县", "金乡县", "嘉祥县", "汶上县", "泗水县", "梁山县"],
            "泰安市": ["泰山区", "岱岳区", "新泰市", "肥城市", "宁阳县", "东平县"],
            "威海市": ["环翠区", "文登区", "荣成市", "乳山市"],
            "日照市": ["东港区", "岚山区", "五莲县", "莒县"],
            "临沂市": ["兰山区", "罗庄区", "河东区", "沂南县", "郯城县", "沂水县", "兰陵县", "费县", "平邑县", "莒南县", "蒙阴县", "临沭县"],
            "德州市": ["德城区", "陵城区", "乐陵市", "禹城市", "宁津县", "庆云县", "临邑县", "齐河县", "平原县", "夏津县", "武城县"],
            "聊城市": ["东昌府区", "茌平区", "临清市", "阳谷县", "莘县", "东阿县", "冠县", "高唐县"],
            "滨州市": ["滨城区", "沾化区", "邹平市", "惠民县", "阳信县", "无棣县", "博兴县"],
            "菏泽市": ["牡丹区", "定陶区", "曹县", "单县", "成武县", "巨野县", "郓城县", "鄄城县", "东明县"]
          }
        }
      }
    },
    computed: {
      // 显示文本
      displayText() {
        const { province, city, county } = this;
        if (province && city && county) {
          return `${province}${city}${county}`;
        } else if (province && city) {
          return `${province}${city}`;
        } else if (province) {
          return province;
        }
        return '';
      }
    },
    methods: {
      // 显示选择器
      showSelector() {
        if (this.disabled) return;
        
        this.showPicker = true;
        this.currentLevel = 'province';
        this.tempProvince = this.province;
        this.tempCity = this.city;
        this.tempDistrict = this.county;
        
        // 加载省份列表
        this.loadOptions();
      },
      
      // 隐藏选择器
      hideSelector() {
        this.showPicker = false;
      },
      
      // 加载当前层级的选项
      loadOptions() {
        switch (this.currentLevel) {
          case 'province':
            this.currentOptions = Object.keys(this.areas);
            // 如果有已选省份，尝试定位到该选项
            if (this.tempProvince) {
              const index = this.currentOptions.indexOf(this.tempProvince);
              this.selectedIndex = index >= 0 ? index : 0;
            } else {
              this.selectedIndex = 0;
            }
            break;
          case 'city':
            if (this.tempProvince && this.areas[this.tempProvince]) {
              this.currentOptions = Object.keys(this.areas[this.tempProvince]);
              // 如果有已选城市，尝试定位到该选项
              if (this.tempCity) {
                const index = this.currentOptions.indexOf(this.tempCity);
                this.selectedIndex = index >= 0 ? index : 0;
              } else {
                this.selectedIndex = 0;
              }
            }
            break;
          case 'county':
            if (this.tempProvince && this.tempCity && this.areas[this.tempProvince] && this.areas[this.tempProvince][this.tempCity]) {
              this.currentOptions = this.areas[this.tempProvince][this.tempCity];
              // 如果有已选区县，尝试定位到该选项
              if (this.tempDistrict) {
                const index = this.currentOptions.indexOf(this.tempDistrict);
                this.selectedIndex = index >= 0 ? index : 0;
              } else {
                this.selectedIndex = 0;
              }
            }
            break;
        }
        
        // 设置滚动位置
        setTimeout(() => {
          this.scrollIntoView = `option-${this.selectedIndex}`;
        }, 100);
      },
      
      // 选择选项
      selectOption(index) {
        this.selectedIndex = index;
      },
      
      // 确认选择
      confirmSelection() {
        const selectedValue = this.currentOptions[this.selectedIndex];
        
        switch (this.currentLevel) {
          case 'province':
            this.tempProvince = selectedValue;
            this.tempCity = '';
            this.tempDistrict = '';
            this.currentLevel = 'city';
            this.loadOptions();
            break;
          case 'city':
            this.tempCity = selectedValue;
            this.tempDistrict = '';
            this.currentLevel = 'county';
            this.loadOptions();
            break;
          case 'county':
            this.tempDistrict = selectedValue;
            // 完成三级选择，触发事件
            this.$emit('change', {
              province: this.tempProvince,
              city: this.tempCity,
              county: this.tempDistrict
            });
            this.hideSelector();
            break;
        }
      },
      
      // 监听滚动事件（可以用于实现自动对齐等功能）
      onScroll(e) {
        // 这里可以添加滚动相关的处理逻辑
      },
      
      // 重置选择器
      reset() {
        this.$emit('change', {
          province: '',
          city: '',
          county: ''
        });
      }
    }
  }
</script>

<style scoped>
  .area-selector {
    width: 100%;
    height: 88rpx;
    background-color: #fff;
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
    font-size: 30rpx;
    color: #333;
    text-align: left;
    padding: 0 20rpx;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  
  .area-selector:active {
    background-color: #f5f5f5;
  }
  
  .area-selector[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  /* 弹窗样式 */
  .picker-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 999;
  }
  
  .picker-content {
    width: 100%;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    max-height: 60vh;
  }
  
  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 96rpx;
    padding: 0 30rpx;
    border-bottom: 1rpx solid #eee;
  }
  
  .cancel-btn,
  .confirm-btn {
    font-size: 32rpx;
  }
  
  .cancel-btn {
    color: #999;
  }
  
  .confirm-btn {
    color: #1296db;
  }
  
  .title {
    font-size: 34rpx;
    color: #333;
  }
  
  .picker-body {
    height: 400rpx;
  }
  
  .option-list {
    height: 100%;
    padding: 0 20rpx;
  }
  
  .option-item {
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #333;
  }
  
  .option-item.active {
    color: #1296db;
    font-weight: 600;
  }
</style>